<template>
  <div class="redpacket-mine app-wrapper">
    <div class="my-info text-center">
      <div class="media-object"><img src="./img/giver_logo.jpg" alt="" class="img-avtar"></div>
      <div class="media-body">
        <h3 class="media-heading">大鱼艺术教育</h3>
        <div class="media-option text-center">
          <div class="media-option-item">
            <p>537</p>
            <p>金额 (元)</p>
          </div>
          <div class="media-option-item">
            <p>210</p>
            <p>数量 (个)</p>
          </div>
        </div>
      </div>
    </div>
    <div class="tab">
      <div class="tab-header text-center">
          <div class="tab-header-item"
            :class="{'active': tabActive == 'send'}"
            @click="tabActive = 'send'"
          >我发出的</div>
          <div class="tab-header-item"
            :class="{'active': tabActive == 'receive'}"
            @click="tabActive = 'receive'"
          >我收到的</div>
      </div>
      <div class="tab-body">
        <div class="redpacket-list tab-body-item">
          <ul>
            <li>
              <p>2019-08-07 12:32</p>
              <p class="text-right">12.30</p>
            </li>
            <li>
              <p>2019-08-07 12:32</p>
              <p class="text-right">12.30</p>
            </li>
            <li>
              <p>2019-08-07 12:32</p>
              <p class="text-right">12.30</p>
            </li>
            <li>
              <p>2019-08-07 12:32</p>
              <p class="text-right">12.30</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      tabActive: 'send'
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import '@/assets/config.scss';

.my-info {
  height: 400px;
  padding-top: 40px;;
  position: relative;

  .media-object {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    position: relative;
  }

  .media-heading { 
    margin-top: 10px;
    font-size: 26px; 
    line-height: 2;
  }
  .media-option {
    display: flex;
    margin-top: 30px;
    color: #999;
    > div { flex: 1; }
    p:nth-of-type(1){
      font-size: 48px;;
    }
    p:nth-of-type(2){
      font-size: 26px;
    }
   
  }
}

.tab {
  height: calc(100% - 400px);
  background-color: #fff; 
}

.tab-header {
    display: flex;
    align-items: center;
    position: relative;
    &:after {
        content: '';
        position: absolute;
        width: 2px;
        height: 28px;
        background-color: #ddd;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0)
    }
}

.tab-header-item {
    flex: 1;
    height: 90px;
    font-size: 30px;
    color: #666;
    line-height: 0.9rem;

    &.active {
      color: #1549eb;
      position: relative;
        &:after{
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            content: '';
            height: 4px;
            background-color: #1549eb;
        }
    } 
}

.tab-body {
  height: calc(100% - 90px);
}
.redpacket-list {
  height: 100%;
  padding: 0 30px;
  font-size: 28px;
  color: #333;
  background-color: #fff;

  li{
    display: flex;
    height: 108px;
    
    line-height: 108px;
    position: relative;

    &:after{
      content: '';
      display: block;
      width: 100%;
      height: 2px;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: #f3f3f3;
    }
    p { 
      flex: 1;
    }
  }
}
</style>